<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #div{
        width: 380px;
        height: 680px;
        border: 1px solid rgb(108, 102, 102);
        margin: auto;
    }
    #input1,#input2,#input3,#input4,#input5,#input6{
        width: 300px;
        height: 30px;
        margin-top: 10px;
        margin-left: 20px;
    }
    p,span,select{
        margin-left: 20px;
        margin-top: 15px;
    }
    input{
        margin-left: 20px;
        margin-top: 10px;
    }
   #btn{
        width: 300px;
        height: 40px;
        margin-left: 20px;
        margin-top: 10px;
    }
    h3{
text-align: center;
}
#huo{
    width: 100px;
    height: 30px;
    border: none;
    margin-left: -102px;
margin-top: 10px;
}
</style>
<body>
    <div id="div">
        <h3>用户注册</h3>
        <input type="text"placeholder="自定义提示" id="input1"><span id="a1" style="color: red;"></span><br>
        <input type="text"placeholder="请输入11位手机号" id="input2"><span id="a2"style="color: red;"></span><br>
        <input type="text"placeholder="请输入验证码" id="input3"><button id="huo">获取验证码</button>
        <br>
        <input type="text"placeholder="请输入长度为6-12个字符的密码" id="input4"><span id="a3" style="color: red;"></span><br>
        <input type="text"placeholder="请再次输入密码" id="input5"><span id="a4" style="color: red;"></span><br>
        <input type="text"placeholder="请输入邮箱格式123@163.com" id="input6"><span id="a5" style="color: red;"></span><br>
<p>请选择兴趣</p>
<input type="checkbox">足球<input type="checkbox">篮球<input type="checkbox">羽毛球<input type="checkbox">网球
<p>请选择职业</p>
<input type="radio" name="aa">程序员<input type="radio" name="aa">设计师<input type="radio" name="aa">构架师
<p>请选择性别</p>
<input type="radio" name="bb">男<input type="radio" name="bb">女<input type="radio" name="bb">其他<br>
<span>请选择收入</span><br>
<select name="" id="">
    <option value="">请选择</option>
    <option value="">1000</option>
    <option value="">2000</option>
    <option value="">3000</option>
    <option value="">4000</option>
    <option value="">5000</option>
</select><br>
<span>请选择支出</span><br>

<select name="" id="">
    <option value="">请选择</option>
    <option value="">1000</option>
    <option value="">2000</option>
    <option value="">3000</option>
    <option value="">4000</option>
    <option value="">5000</option>
</select><br>
<input type="checkbox">我已阅读并同意<br>
<button id="btn">提交</button>
    </div>
    <script>

huo.onclick = function(){
  
        clearInterval(k)
        var num = 5;
  var k = setInterval(fn,1000)
function fn(){
    num--
    var a = document.getElementById("huo")
    a.innerHTML = num
    if(num==0){
        alert(Math.max(Math.ceil(Math.random()*1000000)))
clearInterval(k)
    }
}
}


 input1.onblur = function(){
    var reg = /\w/
    if(reg.test(this.value)){
a1.innerHTML = '√'
    }else{
        a1.innerHTML = '×'
    }
}
input2.onblur = function(){
    var reg = /^1[2-9]\d{9}$/
    if(reg.test(this.value)){
a2.innerHTML = '√'
    }else{
        a2.innerHTML = '×'
    }
}
input4.onblur = function(){
    var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;  
      if(reg.test(this.value)){
a3.innerHTML = '√'
    }else{
        a3.innerHTML = '×'
    }   
}

input5.onblur = function(){
  
var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/; 

      if(reg.test(this.value)){
a4.innerHTML = '√'
    }else{
        a4.innerHTML = '×'
    } 
}
input6.onblur = function(){
    var reg =/^[1-9]\d{2,5}@qq\.com$/
   if(reg.test(this.value)){
a5.innerHTML = "√"
   }else{
       a5.innerHTML = "×"
   }
}  
btn.onclick = function(){

window.open("https://www.baidu.com")
        }

    </script>
</body>
</html>